//付费方式页面
import React,{Component} from 'react'
import {Modal, Form ,Input,Select ,Icon,Divider , InputN} from 'antd'
import Button from '../button/button'
import NumberInput from '../NumberInput/NumberInput'
import './PayMethod.css'
const Option = Select.Option
const FormItem = Form.Item;

let uuid = 0;
class PayMethod extends Component{
    constructor(props){
        super(props)
       
    }
    

    add = () => {
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(uuid);
        uuid++;
        form.setFieldsValue({
          keys: nextKeys,
        });
      }
    remove = (k) => {
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        if (keys.length === 1) {
            return;
        }
        form.setFieldsValue({
            keys: keys.filter(key => key !== k),
          });
    }
    handleSubmit = (e) => {        // from点击确认提交产生的数据
        this.props.form.validateFields((err, values) => {
          if (!err) {
            let allot=[];
            let datasource = {};
            for(let i in values){
                i.match(/^allot/) ? allot.push(values[i]):false;
            }
            
            datasource.allot = allot;
            datasource.keys = values.keys;
            datasource.payment_mode = values.payment_mode
            datasource.payment_part = parseInt(values.payment_part)*100
            if(this.props.form.getFieldValue('payment_mode') == 3){
                datasource.payment_profit = parseInt(values.payment_profit)*100
                datasource.payment_surplus = parseInt(values.payment_surplus)*100
            }
            datasource.payment_type = values.payment_type
            console.log(datasource)
            this.props.onCancel();
            this.props.methoddata(datasource);
           
          }
        });
    }

    PayMethodcancel=()=>{
        this.props.onCancel();
        this.props.form.resetFields();
    }

    render(){
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const cancelbtn={
            position:'absolute',
            bottom: 0,
            right: 0,
            width:'88px',
            height:'30px',
            color:'#fff',
            background: '#4C8EDB',
            borderRadius: '4px'
        }
        getFieldDecorator('keys', { initialValue: [] });
        const keys = getFieldValue('keys');
        const formItems = keys.map((k, index) => {          //代理添加方式内的收益分配
            return (
              <FormItem
                key={k}
              >
                {keys.length > 1 ? (
                    <Icon
                        className="dynamic-delete-button"
                        type="minus-circle-o"
                        disabled={keys.length === 1}
                        onClick={() => this.remove(k)}
                    />
                    ) : null}

                    {getFieldDecorator(`allot${k+1}[role]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 100,marginLeft:10 }} placeholder="角色"/>
                    )}

                    {getFieldDecorator(`allot${k+1}[money]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                    
                        <NumberInput style={{ width: 100,marginLeft:30 }}  placeholder="金额"/>
                    )}
                
                    {getFieldDecorator(`allot${k+1}[type]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Select  style={{ width: 100,marginLeft:30 }}>
                            <Option  value="1">平台收入</Option>
                            <Option  value="2">其他收入</Option>
                        </Select>
                    )}

                    {getFieldDecorator(`allot${k+1}[cash_name]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:" "
                    }],
                    })(
                        <Input  style={{ width: 100 ,marginLeft:30}} placeholder="收款人"/>
                    )}

                    {getFieldDecorator(`allot${k+1}[cash_card]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <NumberInput  style={{ width: 150 ,marginLeft:30}} placeholder="收款账号"/>
                    )}

                    {getFieldDecorator(`allot${k+1}[cash_bank]`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                        required:true,
                        whitespace: true,
                        message:' '
                    }],
                    })(
                        <Input  style={{ width: 150 ,marginLeft:30}} placeholder="收款银行"/>
                    )}
              </FormItem>
            )
          })

        return(
             <Modal title="付费方式" className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                footer={null}
                onCancel={this.PayMethodcancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}>
                <div style={{width:'100%',height:'100%',position:'relative'}}>
                    <Form onSubmit={this.handleSubmit} >
                
                        <div>
                            <div style={{fontWeight:"bold",fontSize:"16px"}}>付款信息</div>
                            <Divider />
                            <div className="method_payment">
                                <div>付款方式</div>
                                <div>   
                                <FormItem>
                                    {getFieldDecorator('payment_mode', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:' '
                                        }],
                                        })(
                                            <Select style={{width:'200px'}} >  
                                                <Option value="1">免费</Option>  
                                                <Option value="2">全款</Option>  
                                                <Option value="3">部分付款</Option>  
                                            </Select>   
                                        )}
                                    </FormItem>
                                    
                                </div>                  
                            </div>
                            {this.props.form.getFieldValue('payment_mode') == 1 ?false:
                            <div className="method_payment">
                            <div>付款金额</div>
                            {this.props.form.getFieldValue('payment_mode') == 3 ?
                            (
                                
                                <div className="payment_center">
                                    
                                    <FormItem>
                                    付款
                                    {getFieldDecorator('payment_part', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message: ' '
                                        }],
                                        })(
                                            <NumberInput  style={{ width:"80px"}} />
                                        )}
                                        元，收益达
                                    </FormItem>
                                    <FormItem>
                                    {getFieldDecorator('payment_profit', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message: ' '
                                        }],
                                        })(
                                            <NumberInput   style={{width:"80px"}} />
                                        )}
                                        元后，补齐余下的
                                    </FormItem>
                                
                                  
                                    <FormItem>
                                    {getFieldDecorator('payment_surplus', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message: ' '
                                        }],
                                        })(
                                            <NumberInput   style={{width:"80px"}} />
                                        )}
                                        元
                                        
                                    </FormItem>                 
                              
                                </div>
                                ):(<FormItem>
                                    {getFieldDecorator('payment_part', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:' '
                                        }],
                                        })(
                                            <NumberInput  style={{ width:"100px"}} />
                                        )} 元
                                    </FormItem>)}
                            
                                                 
                            </div>}
                            
                            {this.props.form.getFieldValue('payment_mode') == 1?false:
                            <div className="method_payment">
                                <div>付款类型</div>
                                <div>
                                    <FormItem>
                                    {getFieldDecorator('payment_type', {
                                        validateTrigger: ['onChange', 'onBlur'],
                                        rules: [{
                                            required:true,
                                            whitespace: true,
                                            message:' '
                                        }],
                                        })(
                                            <Select style={{width:'200px'}}>  
                                                <Option value="1">正常付款</Option>  
                                                <Option value="2">定金</Option>  
                                            </Select>  
                                        )}
                                    </FormItem>
                                    
                                </div>                  
                            </div>}
                            

                        </div>
                        {this.props.form.getFieldValue('payment_mode') == 1?false:
                        (this.props.form.getFieldValue('payment_type') == 1?<div style={{marginTop:'30px'}}>
                            <div style={{fontWeight:"bold",fontSize:"16px"}}>收益分配</div>
                            <Divider />
                            <div  className="method_profit">
                                <div>
                                    <div style={{ width: 100 ,marginLeft:10}}>角色</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>金额</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>类型</div>
                                    <div style={{ width: 100 ,marginLeft:30}}>收款人</div>
                                    <div style={{ width: 150 ,marginLeft:30}}>收款账户</div>
                                    <div style={{ width: 150 ,marginLeft:30}}>收款银行</div>
                                </div>
                                <FormItem>
                                    {getFieldDecorator(`allot0[role]`, {
                                        initialValue:"平台"
                                        })(
                                            <Input style={{ width: 100,marginLeft:30 }}  readOnly/>
                                    )}
                                    {/* this.props.form.getFieldValue("payment_part")-this.props.form.getFieldValue(`allot${k+1}[money]`) */}
                                    {getFieldDecorator(`allot0[money]`, {
                                        initialValue:1
                                        })(
                                            <Input style={{ width: 100,marginLeft:30 }}  readOnly/>
                                    )}
                                    {getFieldDecorator(`allot0[type]`, {
                                        initialValue:"平台收入"
                                        })(
                                            <Input style={{ width: 100,marginLeft:30 }}  readOnly/>
                                    )}
                                    {getFieldDecorator(`allot0[cash_name]`)(
                                            <Input style={{ width: 100,marginLeft:30 }}   disabled/>
                                    )}
                                    {getFieldDecorator(`allot0[cash_card]`)(
                                            <Input style={{ width: 100,marginLeft:30 }}   disabled/>
                                    )}
                                    {getFieldDecorator(`allot0[cash_bank]`)(
                                            <Input style={{ width: 100,marginLeft:30 }}   disabled/>
                                    )}
                                </FormItem>
                                {formItems}
                                <Icon type="plus" onClick={this.add}/>
                            </div>
                        </div>:false)
                        }
                        
                    </Form>
                    <Button onClick={this.handleSubmit} htmlType="submit" datastyle={cancelbtn}>确认</Button>
                </div>
            </Modal>
        )
    }
}
const WrappedDynamicFieldSet = Form.create()(PayMethod);

export default WrappedDynamicFieldSet